<template>
  <div>
    <el-form ref="mainForm" size="medium" :model="growthFormData" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="作物名称" prop="name">
            <el-select v-model="growthFormData.crop_id" placeholder="选择作物" clearable filterable>
              <el-option
                v-for="(item,index) in crops"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item></el-col>
        <el-col :span="12">
          <el-form-item
            label="当前茬"
            prop="stubble"
          >
            <el-select
              v-model="growthFormData.stubble"
              filterable
              clearable
            >
              <el-option
                v-for="i in 3"
                :key="i"
                :label="i"
                :value="i"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="生育期">
        <el-table
          :data="growthFormData.cropGrowthes"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="id"
            label="序号"
            width="80"
          >
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="名称"
            width="140"
          >
            <template v-slot="scope">
              <el-input v-model="scope.row.stage_name" placeholder="名称" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="时间范围"
          >
            <template v-slot="scope">
              <el-date-picker
                v-model="scope.row.daterange"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="water_height"
            label="计划湿润层深度"
            width="140"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.soil_depth" placeholder="计划湿润层深度">
                <template slot="append">cm</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="kc"
            label="kc值"
            width="140"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.kc" placeholder="kc值" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wc_min"
            label="灌溉下限"
            width="150"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.wc_min" placeholder="灌溉下限">
                <template slot="append">%</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wc_max"
            label="灌溉上限"
            width="150"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.wc_max" placeholder="灌溉上限">
                <template slot="append">%</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot="header">
              <el-button size="mini" type="primary" @click="addRow">新增记录</el-button>
            </template>
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="delRow(scope.row,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
        <el-button @click="reset('mainForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    growthFormData: {
      type: Object,
      default() {
        return {
          cropGrowthes: []
        }
      }
    }
  },
  computed: {
    ...mapGetters(['crops'])
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.growthFormData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    },
    addRow() {
      this.growthFormData.cropGrowthes.push({
        id: 1
      })
    },
    delRow(row, index) {
      this.growthFormData.cropGrowthes.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
